<section id="content">
  <div class="block">
    <header>
      <h2>Náhled fotografie</h2>
    </header>
    <!-- HTML5 sekce pro reference -->
    <section class="block-body">
      <script language="Javascript">

        $(window).load(function(){

          var jcrop_api;
          initJcrop();

          function initJcrop() {
            jcrop_api = $.Jcrop('#thumb');
            jcrop_api.setOptions({aspectRatio: 210/180, minSize: [ 105, 90 ], onSelect: updateCoords});
            jcrop_api.focus();
          };

          function updateCoords(c) {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
          };

          function checkCoords() {
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
          };

        });

      </script>
      <p>Kliknutím do fotografie a táhnutím vytvoříte nový náhled.</p>
      <?php foreach ($photo_source->photo_user->find_all() as $item): ?>
      <img id="thumb" src="<?php echo url::base(); ?>files/users/<?php echo $item->username ?>/<?php echo $photo_source->filename ?>" alt="" />
      <?php endforeach ?>
      <form class="big" action="<?php echo url::base(); ?>files/thumb/<?php echo $photo_source->id ?>" method="post" onsubmit="return checkCoords();">
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <input type="submit" value="Crop Image" />
      </form>
    </section>
  </div>
  <div class="block-bottom"></div>
</section>      

